<template>
  <div class="msg5">
    <div class="forum-wrapper">
      <div class="vfor" v-for="(list,index) in lists" :key="index">
        <router-link :to="'/message/Reply/'+list.id" tag="div">
          <div class="rent">
            <img :src="list.head_pic" alt="">
            <div class="content">
              <div class="nick-name">
                <span class="texts">{{list.nickname}}</span>
                <span class="sex-icon"></span>
              </div>
              <div class="address">
                <span class="texts">{{list.areas_name}}</span>
                <span class="time">2017.2.3</span>
              </div>
            </div>
          </div>
        </router-link>
        <div class="desc-pic clearfix">
          <div class="desc">
            {{list.content}}
          </div>
          <div class="pic_img">
            <div class="img_li" v-for="(item,index) in list.img" :key="index">
              <div class="bg-company" v-lazy:background-image="`${item}`"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .msg5 {
    width: 100%;
    margin-bottom: 20%;
    padding-top: 40px;
    .forum-wrapper {
      .vfor {
        border-bottom: 10px solid #f2f2f2;
        &:last-child {
          border-bottom: none;
        }
        .rent {
          margin: 0 10px;
          padding: 10px 0;
          border-bottom: 1px solid rgb(217, 217, 217);
          img {
            width: 40px;
            height: 40px;
            margin-right: 12px;
            border-radius: 50%;
            vertical-align: middle;
          }
          .content {
            display: inline-block;
            text-align: left;
            vertical-align: middle;
            .nick-name {
              margin-bottom: 13px;
            }
            .address {
              color: rgb(153, 153, 153);
            }
          }
        }
      }
    }
    .desc-pic {
      padding: 10px;
      .desc {
        line-height: 16px;
      }
      .pic_img {
        width: 100%;
        .img_li {
          width: 24%;
          height: 120px;
          margin-top: 1%;
          margin-left: 1%;
          display: inline-flex;
          img {
            width: 100%;
            height: 120px;
            background: #f2f2f2;
            float: left;
            margin-left: 2%;
          }
          .bg-company {
            width: 90px;
            height: 95px;
            background-position: center center;
            background-size: cover;
          }
        }
      }
    }
  }
</style>
<script>
  import {Lazyload} from 'mint-ui'
  import Vue from 'vue'
  import {getMessage} from "../../api/forum";
  //  实现背景图片懒加载（利用mint-ui）
  Vue.use(Lazyload, {
    preLoad: 1.3,
    error: 'http://img.mp.sohu.com/upload/20170519/6e8fd80f38774e9c9be2b1a9b84e3e79.gif',
    loading: require('../../assets/images/loading_green.gif'),
    attempt: 1
  });
  export default {
    name: 'Message5',
    data() {
      return {
        lists: []
      }
    },
    created() {
      this._getMessage()
    },
    methods: {
      // 获取论坛列表的地址
      _getMessage() {
        getMessage().then(res => {
          if (res.code === 200) {
            this.lists = res.data
          }
        })
      }
    }
  }
</script>
